<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      body {
        padding: 50px;
      }
      img {
        display: block;
        width: 120px;
      }
    </style>
  </head>
  <body>
    <form id="myForm" name="myForm" enctype="multipart/form-data">
      <!-- 上传单个图片 -->
      <div>
        <img id="touxiang" src="" alt="" /><br /><br />
        <label for="userfile">上传头像:</label><br /><br />
        <input type="file" id="userfile" name="userfile" />
      </div>
      <input
        type="button"
        value="提交"
        id="submit"
      /><br /><br /><br /><br /><br /><br />

      <!-- 上传多个图片 -->
      <div>
        <label for="userfile2">上传多个商品图片(3个以内):</label><br /><br />
        <!-- 要上传多个图片记得 加multiple属性 -->
        <input type="file" id="userfile2" name="userfile2" multiple />
      </div>
      <input type="button" value="提交" id="submit2" />
    </form>
  </body>
  <script src="js/jquery.min.js"></script>
  <script>
    function init() {
      console.log("刷新了");
      $.ajax({
        url: "/user/getuser/5f4f4806989c8c22c76803b5",
        type: "get",
        cache: false,
        success: function (str) {
          console.log(str, 999); //headphoto
          $("#touxiang").attr("src", str.data[0].headphoto);
        },
      });
    }

    init(); //一进入页面就发送请求

    $("#submit").click(() => {
      console.log($("#userfile"));
      let file = $("#userfile")[0].files[0]; //获取里面的图片
      let formData = new FormData(); //创建formData对象
      formData.append("avatar", file); //文件内容==>后端req.file
      formData.append("key1", "月入过万国外游");
      formData.append("key2", "月入过八千广东游");
      formData.append("key3", "月入过五千广州游");
      formData.append("key4", "月入过三千地沟油");

      $.ajax({
        url: "/user/upload/5f4f4806989c8c22c76803b5",
        type: "post",
        cache: false,
        data: formData, //要发送给后端的数据
        processData: false,
        contentType: false, //写成false就是:multipart/form-data
        success: function (str) {
          console.log(str);
          init(); //刷新页面
        },
      });
    });

    // 上传多个图片
    $("#submit2").click(() => {
      // console.log($("#userfile2"));
      //如果上传的文件超过显示,爆出提示信息
      if ($("#userfile2")[0].files.length > 3) {
        alert("您添加的图片已经超过规定的3张");
        return;
      }

      let formData = new FormData(); //创建formData对象
      // $("#userfile2")[0].files.forEach((item) => {
      //   formData.append("photos", item); //文件内容==>后端req.file
      // });
      var arr = Array.from($("#userfile2")[0].files); //伪数组转成真数组,否则会多两次循环
      for (let i in arr) {
        console.log(i, 999);
        formData.append("photos", arr[i]);
      }

      // let file = $("#userfile")[0].files[0]; //获取里面的图片
      //
      //
      formData.append("goodname", "锤子手机");
      // formData.append("key2", "月入过八千广东游");
      // formData.append("key3", "月入过五千广州游");
      // formData.append("key4", "月入过三千地沟油");
      console.log(formData);
      $.ajax({
        url: "/good/add",
        type: "post",
        cache: false,
        data: formData, //要发送给后端的数据
        processData: false,
        contentType: false, //写成false就是:multipart/form-data
        success: function (str) {
          console.log(str);
        },
      });
    });
  </script>
</html>
